<template>
	<el-table :data="tableData.sc" border  style="width: 100%">
		<el-table-column fixed prop="saleId" label="销售机会编号" width="120" />
		<el-table-column prop="saleCname" label="客户名称" width="120" />
		<el-table-column prop="changeSource" label="机会来源" width="120" />
		<el-table-column prop="saleContacts" label="联系人" width="120" />
		<el-table-column prop="salePhone" label="联系电话" width="120" />
		<el-table-column prop="saleSuccess" label="成功率" width="120" />
		<el-table-column prop="saleSynopsis" label="概要" width="120" />
		<el-table-column prop="saleDesc" label="机会描述" width="120" />
		<el-table-column prop="saleCreate" label="创建人" width="120" />
		<el-table-column prop="saleCreatedate" label="创建时间" width="120" />
		<el-table-column prop="salaDesignate" label="指派人" width="100" />
		<el-table-column prop="salaDesignatedate" label="指派时间" width="120" />
		<el-table-column prop="salaState" label="状态" width="100" />
		<el-table-column fixed="right" label="操作" width="140" header-align="center">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
				<el-button link type="primary" size="small" @click="handleRea(scope.row)">指派</el-button>
				<el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination v-model:currentPage="currentPage4" v-model:page-size="pageSize4" :page-sizes="[7, 12, 21, 28]"
		layout="total, prev, pager, next" v-model:total="total" @size-change="handleSizeChange"
		@current-change="handleCurrentChange" />

	<el-dialog v-model="dialogVisible" title="修改销售机会" width="55%" draggable>
		<el-form :model="form.sc" label-width="120px">
			<el-form-item label="客户名字">
				<el-input v-model="form.sc.saleCname" />
			</el-form-item>
			<el-form-item label="机会来源">
				<el-select v-model="form.sc.changeSource" placeholder="请选择机会来源">
					<el-option label="促销" value="促销" />
					<el-option label="广告" value="广告" />
					<el-option label="搜索引擎" value="搜索引擎" />
					<el-option label="线上咨询" value="线上咨询" />
					<el-option label="电话咨询" value="电话咨询" />
					<el-option label="邮件咨询" value="邮件咨询" />
					<el-option label="客户介绍" value="客户介绍" />
				</el-select>
			</el-form-item>
			<el-form-item label="联系人">
				<el-input v-model="form.sc.saleContacts" />
			</el-form-item>
			<el-form-item label="联系电话">
				<el-input v-model="form.sc.salePhone" />
			</el-form-item>
			<el-form-item label="成功几率">
				<el-select v-model="form.sc.saleSuccess" placeholder="请选择成功几率">
					<el-option label="20%" value="20%" />
					<el-option label="30%" value="30%" />
					<el-option label="50%" value="50%" />
					<el-option label="60%" value="60%" />
					<el-option label="70%" value="70%" />
					<el-option label="80%" value="80%" />
				</el-select>
			</el-form-item>
			<el-form-item label="机会概要">
				<el-input v-model="form.sc.saleSynopsis" />
			</el-form-item>
			<el-form-item label="机会描述">
				<el-input v-model="form.sc.saleDesc" type="textarea" />
			</el-form-item>


			<el-form-item>
				<el-button type="primary" @click="onSubmit">提交</el-button>
				<el-button>Cancel</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>

	<!-- 指派 -->
	<el-dialog v-model="dialogVisible2" title="指派销售机会" width="35%" draggable>
		<el-form v-model="testForm.sc" label-width="120px">
			<el-form-item label="销售机会编号">
				<el-input :disabled="true" v-model="testForm.sc.saleId" />
			</el-form-item>
			<el-form-item label="客户名字">
				<el-input :disabled="true" v-model="testForm.sc.saleCname" />
			</el-form-item>

			<el-form-item label="客户经理">
				<el-select v-model="testSelect" placeholder="请选择需要指派的客户经理">
					<el-option v-for="item in form2.sc" :label="item.uName" :key="item.uName" :value="item.uName" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="onSubmit2">指派</el-button>
			</el-form-item>

		</el-form>

	</el-dialog>
</template>


<script setup>
	import {
		ElMessage
	} from 'element-plus'
	import {
		reactive,
		ref
	} from 'vue'
	import axios from 'axios'
	import qs from 'qs'

	const currentPage4 = ref(1)
	const pageSize4 = ref(7)
	const total = ref(10)
	const dialogVisible = ref(false)
	const dialogVisible2 = ref(false)
	const form = reactive({}) //表单数据
	const form2 = reactive({}) //表单数据
	const testSelect = ref('');
	const testForm = reactive({})

	const tableData = reactive({});
	const query = () => {
		axios.post("http://localhost:8080/saleChance/page", qs.stringify({
			page: currentPage4.value,
			size: pageSize4.value
		})).then(res => {
			tableData.sc = res.data.list;
			total.value = res.data.total;
		})
	}
	query()




	//切换每页的行数
	const handleSizeChange = () => {
		query()
	}
	//切换页码的函数
	const handleCurrentChange = () => {
		query()
	}

	//修改
	const handleEdit = (row) => {
		//显示弹出框
		dialogVisible.value = true;
		//回显
		console.log(row)
		form.sc = row;

	}

	//指派
	const handleRea = (row) => {
		//显示弹出框
		dialogVisible2.value = true;
		//回显
		testForm.sc = row;

		if (row.salaState != '未分配') {
			dialogVisible2.value = false;
			//提示不能指派
			ElMessage({
				message: '无法指派',
				type: 'warning',
			})

		} else {
			let ok = confirm("确定要指派吗？")
			if (ok) {
				//发异步请求指派销售机会
				axios.post("http://localhost:8080//user/two", qs.stringify(testForm.sc)).then(res => {
					form2.sc = res.data.list;
					console.log(form2.sc)
				})
			}
		}


	}



	//修改数据访问服务器
	const onSubmit = () => {
		//axios.post:发送异步请求
		//请求的参数需要把json对象，进行转换：qs。stringify（form）
		//then：请求结束，获取响应到的结果，然后再函数内部处理增数据。
		axios.post("http://localhost:8080//saleChance/update", qs.stringify(form.sc)).then(res => {
			dialogVisible.value = false;
			query()
		})
	}

	//指派销售机会
	const onSubmit2 = () => {

		testForm.sc.salaDesignate = testSelect.value;
		//axios.post:发送异步请求
		//请求的参数需要把json对象，进行转换：qs。stringify（form）
		//then：请求结束，获取响应到的结果，然后再函数内部处理增数据。
		axios.post("http://localhost:8080/saleChance/updateRea", qs.stringify(testForm.sc)).then(res => {
			query()
			ElMessage({
				message: '指派成功',
				type: 'success',
			})
			dialogVisible2.value = false;
		})
		
		
	}

	const handleDel = (row) => {
		console.log('click')
		//删除
		if (row.salaState != '未分配') {
			alert("不能删除")
			//提示不能删
			console.log('click1')
		} else {
			let ok = confirm("确定要删除吗？")
			if (ok) {
				//发异步请求删除数据
				axios.post("http://localhost:8080//saleChance/delete", qs.stringify({
					saleId: row.saleId
				})).then(res => {
					query()
				})

			}
		}
	}
</script>
